使用第一种方法后：
<template>
    <div>
        <template v-if="!isFullPage">
            <div class="header">
                <div class="search_info">
                    <RouterLink to="/search">
                        <MySearch class="mySearch" :placeholder="123"></MySearch>
                    </RouterLink>
                    <RouterLink to="/user/massage">
                        <i class="iconfont">&#xe605;</i>
                    </RouterLink>
                </div>
                <div class="nav">
                    <div class="navListContainer swiper-container" ref="navListContainer">
                        <div class="navList swiper-wrapper" ref="navList">
                            <a class="swiper-slide" v-for="(item, index) in navList" :key="index"
                                @click="clickNav(index)">
                                <span>{{ item.title }}</span>
                                <i :class="{ iconfont: true, hide: item.isHide }">&#xe60d;</i>
                            </a>
                        </div>
                    </div>
                    <div class="catalog">
                        <RouterLink to="/catalog">
                            <i class="iconfont">&#xe600;</i>
                            <span>
                                分类
                            </span>
                        </RouterLink>
                    </div>
                </div>

            </div>
            <div class="show">
                <HomePage v-if="navListIndex == 0" @changeBgc="changeBgc" :lastColor="lastColor" />
                <navList v-if="navListIndex == 1" :data="navListData.navList1" />
                <navList v-if="navListIndex == 2" :data="navListData.navList2" />
                <navList v-if="navListIndex == 3" :data="navListData.navList3" />
                <navList v-if="navListIndex == 4" :data="navListData.navList4" />
                <navList v-if="navListIndex == 5" :data="navListData.navList5" />
                <navList v-if="navListIndex == 6" :data="navListData.navList6" />
                <navList v-if="navListIndex == 7" :data="navListData.navList7" />
                <navList v-if="navListIndex == 8" :data="navListData.navList8" />
                <navList v-if="navListIndex == 9" :data="navListData.navList9" />
            </div>
            <div class="server">
                <div class="serverItem">
                    <img src="https://x.dscmall.cn/storage/assets/admin/images/custom_jump_logo.png" alt="">
                    <span></span>
                    <span></span>
                </div>
                <div class="serverItem">
                    <img src="https://x.dscmall.cn/storage/assets/admin/images/kefu_logo.png" alt="">
                </div>
                <div class="serverItem">
                    <img src="https://x.dscmall.cn/static/dist/img/03-share.png" alt="">
                </div>
                <div class="toTop" v-show="isShowToTop" @click="toTop">
                    <i class="iconfont">&#xe88d;</i>
                </div>
            </div>
        </template>
        <router-view></router-view>
    </div>
</template>

<script>
import { GetData, PostData } from '@/api'
import MySearch from '@/components/mySearch.vue'
import HomePage from '@/pages/HomePage.vue'
import Swiper from 'swiper'
import navList from '@/pages/navList.vue'

export default {
    data() {
        return {
            isShowToTop: false,
            navList: [
                { title: "首页", isHide: false },
                { title: "家用电器", isHide: true },
                { title: "男装女装", isHide: true },
                { title: "鞋靴箱包", isHide: true },
                { title: "手机数码", isHide: true },
                { title: "电脑办公", isHide: true },
                { title: "家具纺织", isHide: true },
                { title: "个人化妆", isHide: true },
                { title: "休闲运动", isHide: true },
                { title: "知识付费", isHide: true },
            ],
            navListIndex: 0,
            lastColor: '#e22c2c',
            navListData: {
                navList1: {
                    data: null,
                    goodsList: null,
                    cat_id: 858
                },
                navList2: {
                    data: null,
                    goodsList: null,
                    cat_id: 6
                },
                navList3: {
                    data: null,
                    goodsList: null,
                    cat_id: 8
                },
                navList4: {
                    data: null,
                    goodsList: null,
                    cat_id: 3
                },
                navList5: {
                    data: null,
                    goodsList: null,
                    cat_id: 4
                },
                navList6: {
                    data: null,
                    goodsList: null,
                    cat_id: 5
                },
                navList7: {
                    data: null,
                    goodsList: null,
                    cat_id: 860
                },
                navList8: {
                    data: null,
                    goodsList: null,
                    cat_id: 866
                },
                navList9: {
                    data: null,
                    goodsList: null,
                    cat_id: 1460
                }
            }
        }
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll)
    },
    components: {
        MySearch,
        HomePage,
        navList,
    },
    mounted() {
        window.addEventListener('scroll', this.handleScroll)
        this.getLastColor()
        new Swiper('.navListContainer', {
            slidesPerView: 'auto',
            spaceBetween: 0,
            freeMode: true,
            freeModeSticky: true,
        });
    },
    computed: {
        isFullPage() {
            console.log(this.$route.meta.fullPage)
            return this.$route.meta.fullPage
        }
    },
    methods: {
        toTop() {
            this.isShowToTop = false
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            })
        },
        handleScroll() {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
            if (scrollTop > 500) {
                this.isShowToTop = true
            } else {
                this.isShowToTop = false
            }
        },
        changeBgc(color) {
            document.querySelector('.header').style.backgroundColor = color
        },
        async clickNav(index) {
            this.navList.forEach(item => item.isHide = true)
            this.navList[index].isHide = false
            this.navListIndex = index
            this.getLastColor()
            if (this.navListData.navList1.data == null && index == 1) {
                const theData = await this.getNavListData(858)
                this.navListData.navList1.data = theData.data
                this.navListData.navList1.goodsList = theData.goodsList

            }
            if (this.navListData.navList2.data == null && index == 2) {
                const theData = await this.getNavListData(6)
                this.navListData.navList2.data = theData.data
                this.navListData.navList2.goodsList = theData.goodsList
            }
            if (this.navListData.navList3.data == null && index == 3) {
                const theData = await this.getNavListData(8)
                this.navListData.navList3.data = theData.data
                this.navListData.navList3.goodsList = theData.goodsList
            }
            if (this.navListData.navList4.data == null && index == 4) {
                const theData = await this.getNavListData(3)
                this.navListData.navList4.data = theData.data
                this.navListData.navList4.goodsList = theData.goodsList
            }
            if (this.navListData.navList5.data == null && index == 5) {
                const theData = await this.getNavListData(4)
                this.navListData.navList5.data = theData.data
                this.navListData.navList5.goodsList = theData.goodsList
            }
            if (this.navListData.navList6.data == null && index == 6) {
                const theData = await this.getNavListData(5)
                this.navListData.navList6.data = theData.data
                this.navListData.navList6.goodsList = theData.goodsList
            }
            if (this.navListData.navList7.data == null && index == 7) {
                const theData = await this.getNavListData(860)
                this.navListData.navList7.data = theData.data
                this.navListData.navList7.goodsList = theData.goodsList
            }
            if (this.navListData.navList8.data == null && index == 8) {
                const theData = await this.getNavListData(866)
                this.navListData.navList8.data = theData.data
                this.navListData.navList8.goodsList = theData.goodsList
            }
            if (this.navListData.navList9.data == null && index == 9) {
                const theData = await this.getNavListData(1460)
                this.navListData.navList9.data = theData.data
                this.navListData.navList9.goodsList = theData.goodsList
            }
        },
        changeColorMode(rgbColor) {
            //将rgb模式的颜色转化为16进制
            const match = rgbColor.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/)
            if (match) {
                const r = parseInt(match[1])
                const g = parseInt(match[2])
                const b = parseInt(match[3])
                // 将 RGB 值转换为 16 进制
                const hexR = r.toString(16).padStart(2, '0')
                const hexG = g.toString(16).padStart(2, '0')
                const hexB = b.toString(16).padStart(2, '0')
                const hexColor = `#${hexR}${hexG}${hexB}`
                return hexColor
            }
        },
        getLastColor() {
            const elem = document.querySelector('.header')
            const rgbColor = window.getComputedStyle(elem).backgroundColor
            this.lastColor = this.changeColorMode(rgbColor)
        },
        async getNavListData(cat_id) {
            const data = await GetData(`/visual/visual_second_category?cat_id=${cat_id}`)
            const jsonData = {
                cat_id
            }
            const goodsList = await PostData('/catalog/goodslist', jsonData)
            return {
                data,
                goodsList
            }
        }
    }
}
</script>

<style scoped>
a {
    text-decoration: none;
    color: #fff;
}

a.router-link-active {
    font-weight: bold;
}

.header {
    width: 100%;
    position: relative;
    background-color: #e22c2c;
}

.search_info {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

.mySearch {
    width: 85.3333vw;
}

i.iconfont {
    font-size: 6.4vw;
}

i.iconfont.hide {
    display: none;
}

.nav {
    height: 10.6667vw;
    width: 100%;
    display: flex;
    padding: 0 2.6667vw;
    /* box-sizing: border-box; */
}

.nav .navListContainer {
    width: 80vw;
    overflow: hidden;
    height: 10.6667vw;
    position: relative;
}

.navList a {
    padding: 1.0667vw;
    max-width: 21.3333vw;
    display: flex;
    flex-direction: column;
}

.navList span {
    line-height: 5.3333vw;
    display: block;
}

.navList a i.iconfont {
    font-weight: bold;
    font-size: 3.2vw;
    bottom: 0;
    text-align: center;
}

.catalog {
    height: 10.6667vw;
    padding: 1.3333vw;
    font-size: 4.2667vw;
    color: #fff;
}

.catalog i.iconfont {
    font-size: 4.2667vw;
    line-height: 5.3333vw;
}

.server {
    position: fixed;
    right: 2.6667vw;
    top: 100vw;
    display: flex;
    flex-direction: column;
    z-index: 999;

    .serverItem {
        width: 15.4667vw;
        height: 15.4667vw;
        position: relative;

        img {
            width: 15.4667vw;
            height: 15.4667vw;
        }
    }

    .toTop {
        width: 15.4667vw;
        height: 15.4667vw;
        display: flex;
        align-items: center;
        justify-content: center;

        i.iconfont {
            width: 50px;
            height: 50px;
            display: block;
            font-size: 6.6667vw;
            background-color: #fff;
            border-radius: 50%;
            line-height: 13.3333vw;
        }
    }
}



@keyframes living {
    0% {
        transform: scale(1.5);
        opacity: 0.4;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

.serverItem span:nth-child(2) {
    animation-delay: 1.5s;
}

.serverItem span {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 4px;
    bottom: 7px;
    z-index: -1;
    background: red;
    border-radius: 50%;
    animation: 3s linear 0s infinite normal none running living;
}
</style>